<!Doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="1075199251,张凯,18772383543,wuwii,追光者w,有梦想的咸鱼,一棵树站在原野上,Slience">
    <link rel="icon" href="http://blog.wuwii.com/images/favicon.ico?v=5.1.1" type="image/x-icon">
    <title>Wu - Home page of wuwii</title>
    <link rel="stylesheet" type="text/css" href="js/main.css"/>
</head>

<body>
<div class="vi">
    <div class="sidebar">
        <div class="header">
            <h1>Wu</h1>
            <div class="quote">
                <p class="quote-text animate-init">
                    <span class="animate-init">Good,</span>
                    <span class="animate-init"> better,</span>
                    <span class="animate-init">best.</span>
                    <span class="animate-init"> Never let it rest.</span>
                </p>
            </div>
        </div>
        <div class="menu">
            <p><a href="http://blog.wuwii.com" class="animate-init" rel="noopener noreferrer">Blog</a></p>
            <p><a href="https://github.com/kaimz" class="animate-init" rel="external nofollow noopener noreferrer">Github</a></p>
            <p><a href="mailto:k@wuwii.com" class="animate-init" rel="external nofollow noopener noreferrer">Email</a></p>
        </div>
        <div class="location">
            <i class="location-icon"></i>
            <span class="location-text animate-init">Wuhan - China</span>
        </div>
        <div class="relocating">
            Navigating to: <span class="relocate-location"></span>...
        </div>
    </div>

    <div class="content">
        <span class="close">close</span>
    </div>
</div>
<canvas width="1920" height="949"></canvas>
<script type="text/javascript" src="js/index.js"></script>
<script>
    $(document).ready(function () {
        var delay = 1;
        var DELAY_STEP = 200;
        var animationOptions = { opacity: 1, top: 0};

        $('h1').animate(animationOptions).promise()
            .pipe(animateMain)
            .pipe(animateLocationIcon);

        function animateMain() {
            var dfd = $.Deferred();
            var els = $('.animate-init');
            var size = els.size();

            els.each(function (index, el) {
                delay++;
                $(el).delay(index * DELAY_STEP)
                    .animate(animationOptions);
                (size - 1 === index) && dfd.resolve();
            });
            return dfd.promise();
        }

        function animateLocationIcon() {
            $('.location-icon').delay(delay * DELAY_STEP).animate({
                opacity: 1,
                top: 0
            }).promise().done(animationQuote);
        }

        function animationQuote() {}
    });

    document.addEventListener('touchmove', function (e) {
        e.preventDefault()
    })
    var c = document.getElementsByTagName('canvas')[0],
        x = c.getContext('2d'),
        pr = window.devicePixelRatio || 1,
        w = window.innerWidth,
        h = window.innerHeight,
        f = 90,
        q,
        m = Math,
        r = 0,
        u = m.PI*2,
        v = m.cos,
        z = m.random
    c.width = w*pr
    c.height = h*pr
    x.scale(pr, pr)
    x.globalAlpha = 0.6
    function i(){
        x.clearRect(0,0,w,h)
        q=[{x:0,y:h*.7+f},{x:0,y:h*.7-f}]
        while(q[1].x<w+f) d(q[0], q[1])
    }
    function d(i,j){
        x.beginPath()
        x.moveTo(i.x, i.y)
        x.lineTo(j.x, j.y)
        var k = j.x + (z()*2-0.25)*f,
            n = y(j.y)
        x.lineTo(k, n)
        x.closePath()
        r-=u/-50
        x.fillStyle = '#'+(v(r)*127+128<<16 | v(r+u/3)*127+128<<8 | v(r+u/3*2)*127+128).toString(16)
        x.fill()
        q[0] = q[1]
        q[1] = {x:k,y:n}
    }
    function y(p){
        var t = p + (z()*2-1.1)*f
        return (t>h||t<0) ? y(p) : t
    }
    document.onclick = i
    document.ontouchstart = i
    i()
</script>
</body>
</html>
